<template>
  <router-view/>
  <van-tabbar v-model="active">
    <van-tabbar-item
        v-for="item in router.options.routes[0].children"
        :key="item.path"
        :icon="item.meta.icon"
        :url="`#/${item.path}`"
    >{{ item.meta.name }}
    </van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import {ref, onMounted} from 'vue';
// 路由
// useRouter: 提供对路由实例的访问，主要用于编程式导航和监听路由变化。
// useRoute: 提供对当前路由对象的访问，主要用于获取当前路由的详细信息。
import {useRouter, useRoute} from 'vue-router';
// tabbar 组件
const active = ref(0);
// 路由跳转
// 创建路由实例
const router = useRouter();
// 创建路由对象
const route = useRoute();
onMounted(() => {
  const data = router.options.routes[0]
  active.value = data.children.findIndex(item => '/' + item.path === route.path)
})

</script>

<style scoped>

</style>
